<template>
  <div>

    <!-- 条件搜托条 -->
    <div class="topSearch">
      <div class="leftBox">
        <div class="searchbox">
        <em>范围：</em>
        <!-- <el-input v-model="searchBox.programme" size="small" style="width:250px" placeholder="请输入方案名称"></el-input> -->
        <el-select v-model="searchBox.type" @change="getList" size="small" placeholder="请选择">
          <el-option label="集团" value="Group"></el-option>
          <el-option label="学校" value="School"></el-option>
        </el-select>
        </div>
      </div>
      <div class="rightBox">
         <el-button type="primary" size="mini" @click="categorySet">类别管理</el-button>
         <el-button type="primary" size="mini" @click="addMerchant">添加商户号</el-button>
      </div>
      <div class="clear"></div>
    </div>

    <!-- 列表内容↓ -->
    <div class="contentBox">
      <el-table :data="accountList" :header-cell-style="headClass" border stripe style="width: 100%" height="90%">
        <el-table-column prop="schoolName" label="机构/学校"></el-table-column>
        <el-table-column prop="merchantCode" label="商户号"></el-table-column>
        <el-table-column prop="sectionNames" v-if="searchBox.type=='School'" label="学段"></el-table-column>
        <el-table-column prop="typeName" label="类别"></el-table-column>
        <el-table-column prop="typeScope" label="所属范围">
          <template slot-scope="scope">
            <span v-if="scope.row.typeScope=='School'">学校</span>
            <span v-else>集团</span>
          </template>
        </el-table-column>
        <el-table-column width="180" label="操作">
          <template slot-scope="scope">
            <el-button  @click="change(scope.row)" type="primary" size="mini">修改</el-button>
            <el-button  @click="drop(scope.row)" type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    </div>


    <!-- 弹层内容↓ -->
   <el-dialog title="类别管理" :visible.sync="dialogFormVisible" width="50%">
     <div class="layerBox">
      <el-table :data="categoryList" :header-cell-style="headClass" border stripe style="width: 100%" height="350px">
          <el-table-column prop="typeName" label="类别名称"></el-table-column>
          <el-table-column label="所属范围">
            <template slot-scope="scope">
              <span v-if="scope.row.typeScope=='School'">学校</span>
              <span v-else>集团</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link :disabled="scope.row.isUse" @click="dropCategory(scope.row)" type="danger">删除</el-link>
            </template>
          </el-table-column>
      </el-table>
      <div class="addBox">
        <em>类别名称：</em>
        <el-input v-model="addCategoryBox.typeName" size="small" style="width:150px; margin:0 5px 0 0;" placeholder="请输入内容"></el-input>
        <em>所属范围：</em>
        <el-select v-model="addCategoryBox.typeScope" size="small" style="width:150px; margin:0 5px 0 0;" placeholder="请选择">
          <el-option
            v-for="item in typeScopeList"
            :key="item.typeScope"
            :label="item.typeScopeName"
            :value="item.typeScope">
          </el-option>
        </el-select>
        <el-button type="success" @click="addCategory" size="small">添加类别</el-button>
      </div>
      <!-- <div class="bts"><el-button  @click="drop(scope.row)" type="success" style="width:50%;">添加类别</el-button></div> -->
    </div>
   </el-dialog>


   <el-dialog :title="layerTitle" :visible.sync="dialogFormVisible1">
     <el-form :model="accountDetail" label-width="80px" size="small">
       <el-form-item label="范围" v-if="flag!='EDIT'">
         <!-- FIXME: 设置 -->
          <el-select v-model="searchBox.type" @change="addSet"  size="small" placeholder="请选择">
            <el-option label="集团" value="Group"></el-option>
            <el-option label="学校" value="School"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择学校" v-if="searchBox.type!='Group'">
          <!-- <el-input v-model="accountDetail.schoolId" placeholder="请输入内容"></el-input> -->
          <el-select v-model="accountDetail.schoolId" @change="schoolChange" placeholder="请选择" :disabled="flag=='EDIT'">
            <el-option v-for="sc in linSchool" :key="sc.schoolId" :label="sc.schoolName"  :value="sc.schoolId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学段" v-if="searchBox.type!='Group'">
          <el-checkbox-group v-model="checkList" :disabled="flag=='EDIT'">
            <el-checkbox v-for="(a,index) in periodList" :key="index" :label="a.sectionId">{{a.sectionName}}</el-checkbox>
          </el-checkbox-group>

        </el-form-item>
        <el-form-item label="商户号">
          <el-input v-model="accountDetail.merchantCode" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="公钥">
          <el-input v-model="accountDetail.publicKey" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="密钥">
          <el-input v-model="accountDetail.privateKey" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <!-- <el-input v-model="accountDetail.typeId" placeholder="请输入内容"></el-input> -->
          <el-select v-model="accountDetail.typeId" placeholder="请选择" :disabled="this.flag=='EDIT'" @change="chotype">
            <el-option v-for="ac in linAccount" :key="ac.id" :label="ac.typeName" :value="ac.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

<!-- FIXME:弹层按钮操作 -->
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="saveMerchant">添加</el-button>
        <el-button size="small" @click="unSet">取 消</el-button>
      </div>
   </el-dialog>

   <!-- 弹层内容结束↑ -->


  </div>
</template>

<script>
export default {
  data() {
    return {
      ccc:'收款账户管理',
      dialogFormVisible:false,
      dialogFormVisible1:false,
      layerTitle:'',
      searchBox:{
        type:'Group',
        schoolId:''
      },
      accountList:[
        // {typeScope:'School',schoolId:'14',schoolName:'度假区衡水实验中学',merchantCode:'1111111111',publicKey:null,privateKey:null,typeId:'3',typeName:'学费类'}
      ],
      categoryList:[
        // {id:'1',typeName:'学校商户',typeScope:'School',isUse:true},
        // {id:'1',typeName:'后勤商户',typeScope:'Group',isUse:false},
      ],
      typeScopeList:[
        {typeScope:'School',typeScopeName:'学校'},
        {typeScope:'Group',typeScopeName:'集团'},
      ],
      addCategoryBox:{
        typeName:'',
        typeScope:''
      },
      accountDetail:{
        schoolId:'',
        merchantCode:'',
        publicKey:'',
        privateKey:'',
        typeId:'',
        typeIsUse:'',
        sections:'',
      },
      linSchool:[],
      linAccount:[],
      checkList:[],
      periodList:[],
      payTypeList:[
        { value: 'shou1', label: '国家统一收费标准'},
        { value: 'shou2', label: '省收费标准'}
      ],
      flag:'',
      havChoSectionId:'',
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 头部样式
    headClass:function(){
      return 'text-align: center;'
    },
    // 获取收款账户列表
    getList:function(){
      this.$api.systemSetup.GetCollectionAccountList(this.searchBox.type).then(res=>{
        //console.log("获取收款账户列表",res);
        this.accountList = res.data.result;
      })
    },
    // 类别设置
    categorySet:function(){
      this.dialogFormVisible = true;
      this.getCategoryList();
    },
    // 获取类别列表
    getCategoryList:function(){
      this.$api.systemSetup.GetCategoryList().then(res=>{
        //console.log("获取类别列表",res);
        this.categoryList = res.data.result;
      })
    },
    // 添加类别
    addCategory:function(){
    if((this.addCategoryBox.schoolId==''||this.addCategoryBox.typeName==null||this.addCategoryBox.typeName==undefined)&&this.searchBox.type!='Group'){
      this.$message({
          message:'请输入类别名称!',
          type: 'warning'
      })
      return;
    }
    if(this.addCategoryBox.typeName==''||this.addCategoryBox.typeName==null||this.addCategoryBox.typeName==undefined){
      this.$message({
          message:'请输入类别名称!',
          type: 'warning'
      })
      return;
    }
    if(this.addCategoryBox.typeScope==''||this.addCategoryBox.typeScope==null||this.addCategoryBox.typeScope==undefined){
      this.$message({
          message:'请选择所属范围!',
          type: 'warning'
      })
      return;
    }
      this.$api.systemSetup.AddCategory(this.addCategoryBox.typeName,this.addCategoryBox.typeScope).then(res=>{
          //console.log("删除类别返回",res);
          if(res.data.status=='SUCCESS'){
            this.$message({
                message:'类别添加成功!',
                type: 'success'
            })
            this.addCategoryBox.typeName = '';
            this.addCategoryBox.typeScope = '';
            this.getCategoryList();
          }else{
            this.$message.error(res.data.message);
          }
        })
    },
    // 删除类别
    dropCategory:function(obg){
      this.$confirm('确定删除当前类别？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.$api.systemSetup.DropCategory(obg.id).then(res=>{
          //console.log("删除类别返回",res);
          if(res.data.status=='SUCCESS'){
            this.$message({
                message:'删除成功!',
                type: 'success'
            })
            this.getCategoryList();
          }else{
            this.$message.error(res.data.message);
          }
        })
      }).catch(()=>{
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })

    },
    // TODO:添加商户号
    addMerchant:function(){
      this.flag="ADD";
      this.layerTitle = "添加商户号";
      this.accountDetail = {}
      this.checkList = [];
      this.havChoSectionId = "";
      this.initializationMerchant();
      this.dialogFormVisible1 = true;
    },
    // 商户初始化
    initializationMerchant:function(sid){
      this.$api.systemSetup.InitializationMerchant(this.searchBox.type,"").then(res=>{
        //console.log("初始化商户号",res);
        this.linAccount = res.data.result.accountTypes;
        if(res.data.result.schools){
          // this.accountDetail.schoolId = res.data.result.schools[0].schoolId;
          this.linSchool = res.data.result.schools;
        }
        if(sid){
          this.getXueduan(sid)
        }else{
          // this.accountDetail.schoolId = res.data.result.schools[0].schoolId;
          if(res.data.result.schools){
          this.getXueduan(res.data.result.schools[0].schoolId)
          }
        }
      })
    },
    schoolChange:function(){
      this.checkList = [];
      this.getXueduan(this.accountDetail.schoolId);
    },
    getXueduan:function(sid){
      // var that = this;
      this.$api.systemSetup.InitializationMerchant(this.searchBox.type,sid).then(res=>{
        //console.log("获取学段",res);
          this.periodList = res.data.result.sections;
          if(this.havChoSectionId){
            var nl = [];
            this.periodList.forEach(event=>{
            if(parseInt(this.havChoSectionId)==event.sectionId){
              nl.push(event);
            }
          })
          this.periodList = [];
          this.periodList = JSON.parse(JSON.stringify(nl));
          }
        // }
      })
    },
    // 商户类型选择操作
    chotype:function(){
      for(var a=0,len =this.linAccount.length;a<len;a++){
        if(this.accountDetail.typeId==this.linAccount[a].id){
          this.accountDetail.typeIsUse = this.linAccount[a].isUse;
        }
      }
    },
    // 保存商户号
    saveMerchant:function(){

      if(this.accountDetail.merchantCode==''||this.accountDetail.merchantCode==null||this.accountDetail.merchantCode==undefined){
        this.$message({
          message:'请输入商户号',
          type:'warning'
        })
        return;
      }
      if(this.accountDetail.publicKey==''||this.accountDetail.publicKey==null||this.accountDetail.publicKey==undefined){
        this.$message({
          message:'请输入公钥',
          type:'warning'
        })
        return;
      }
      if(this.accountDetail.privateKey==''||this.accountDetail.privateKey==null||this.accountDetail.privateKey==undefined){
        this.$message({
          message:'请输入私钥',
          type:'warning'
        })
        return;
      }
      if(this.accountDetail.typeId==''||this.accountDetail.typeId==null||this.accountDetail.typeId==undefined){
        this.$message({
          message:'请选择类别',
          type:'warning'
        })
        return;
      }

      if(this.checkList.length==0&&this.searchBox.type=="School"){
        this.$message({
          message:'请选择学段',
          type:'warning'
        })
        return;
      }
      this.accountDetail.sections = "";
      this.checkList.forEach(event=>{
        this.accountDetail.sections += event+',';
      })

      this.accountDetail.sections = this.accountDetail.sections.substr(0,this.accountDetail.sections.length-1);

      if(this.searchBox.type=="Group"){
        this.accountDetail.typeScope="Group"
      }else{
        this.accountDetail.typeScope="School"
      }

      this.$api.systemSetup.SaveMerchant(this.flag,this.accountDetail).then(res=>{
        //console.log("添加/修改商户号",res);
        if(res.data.status=='SUCCESS'){
          this.$message({
              message:'商户号保存成功!',
              type: 'success'
          })
          this.getList();
          this.accountDetail={};
          this.dialogFormVisible1 = false;
        }else{
          this.$message.error(res.data.message);
        }
      })
    },
    // 修改商户号
    change:function(obg){
      this.dialogFormVisible1 = true;
      this.flag="EDIT";
      this.layerTitle = "修改商户号";
      this.accountDetail = {};
      this.checkList = [];
      this.initializationMerchant(obg.schoolId);
      this.havChoSectionId = obg.sectionIds;
      this.$api.systemSetup.GetMerchantDetaile(obg.schoolId,obg.typeId,obg.typeScope,obg.sectionIds,obg.merchantCode).then(res=>{
        //console.log("获取商户号详情",res);
        this.accountDetail = res.data.result.accountView;
        // this.periodList = res.data.result.sections;
        this.checkList.push(parseInt(obg.sectionIds));
        // if(res.data.result.sections.length>0){
        // res.data.result.sections.forEach(event=>{
        // })
        // }
        // // this.periodList = res.data.result.
        // console.log(this.accountDetail);
      })
    },
    // 删除
    drop:function(obg){
      this.$confirm('确定删除当前商户号？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.$api.systemSetup.DropMerchant(obg.schoolId,obg.typeId,obg.merchantCode, obg.typeScope=='School'?obg.sectionIds:'').then(res=>{
          // //console.log("删除商户号",res);
          if(res.data.status=='SUCCESS'){
            this.$message({
                message:'删除成功!',
                type: 'success'
            })
            this.getList();
          }else{
            this.$message.error(res.data.message);
          }
        })
      }).catch(()=>{
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    //TODO:取消设置
    unSet:function(){
      this.dialogFormVisible1 = false;
      this.getList();
    },
    // TODO: 设置弹层所选的范围
    addSet:function(){
      this.initializationMerchant();
    }
  }
}
</script>
